<template>
  <div class="detail-content">
    <div class="com-tag">
      <div
      @click="tagType = 0"
      :class="tagType == 0 ? 'tag_a' : 'tag_b'">
      基本信息
      </div>
      <div
      @click="tagType = 1"
      :class="tagType == 1 ? 'tag_a' : 'tag_b'">
      网报信息
      </div>
    </div>
    <div class="basic-info" v-if="tagType == 0">
      <div class="info-item">
        <div class="title">套餐名称</div>
        <div class="content">
          <span>{{ stateData.name }}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="title">添加套餐课程</div>
        <div class="content table-content">
          <div class="set-meal-type">
            <div>{{ stateData.courseInfo.courseType }}</div>
            <div>限制课程个数{{ stateData.courseInfo.limitNum }}个</div>
            <div>
              <span :class="stateData.courseInfo.tableShow ? 'icon' : ''">
                <el-icon 
                @click="stateData.courseInfo.tableShow = !stateData.courseInfo.tableShow">
                <ArrowRight />
                </el-icon>
              </span>
            </div>
          </div>
          <div class="table-list" v-if="stateData.courseInfo.tableShow">
            <div class="list">
              <div class="list-item" v-for="(title, titIndex) in stateData.courseInfo.tableInfo.cloumn" :key="titIndex">
                {{ title.lable }}
              </div>
            </div>
            <div class="list list_b" v-for="(item, index) in stateData.courseInfo.tableInfo.setMealList" :key="index">
              <div class="list-item" v-for="(item2, index2) in stateData.courseInfo.tableInfo.cloumn" :key="index2">
                {{ item[item2.prop] }}
              </div>
            </div>
          </div>
          <div class="table-footer">
            <div>已添加{{ stateData.courseInfo.addedNum }}个课程</div>
            <div>限制工具个数{{ stateData.courseInfo.toolNum }}个</div>
            <div>套餐总价{{ stateData.courseInfo.price }}</div>
          </div>
        </div>
      </div>
      <div class="info-item">
        <div class="title">添加课程有效期</div>
        <div class="content">
          <span>2021-04-24至2021-05-03</span>
        </div>
      </div>
      <div class="info-item">
        <div class="title">套餐归属校区</div>
        <div class="content">
          <span>凤岗</span>
        </div>
      </div>
    </div>
    <div class="basic-info noline-info" v-if="tagType == 1">
      <div class="info-item">
        <div class="title">套餐简介</div>
        <div class="content">
          <span>{{ onlineState.briefIntroduction }}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="title">套餐简介</div>
        <div class="content">
          <span>{{ onlineState.suitableSubjects }}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="title">套餐简介</div>
        <div class="content">
          <span>{{ onlineState.trainingObjectives }}</span>
        </div>
      </div>
      <div class="info-item img-info">
        <div class="upBtn">
          <input class="upInp" v-show="false" type="file" @change="inpChange" id="uploadImg"/>
          <el-button type="primary" @click="uploadImg">上传图片</el-button>
          <div class="img-list">
            <img :src="onlineState.imagesUrl">
          </div>
        </div>

      </div>
    </div>
    <div class="save-btn">
      <el-button type="primary">确定</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive} from "vue";
import { ArrowRight } from "@element-plus/icons-vue";
const tagType = ref(0)
const stateData = reactive({
  name: "2021五一双科优惠班",
  courseInfo: {
    courseType: "技术类",
    limitNum: 0,
    addedNum: 5,
    toolNum: 0,
    price: "5000.00",
    tableShow: false,
    tableInfo: {
      cloumn: [
        {prop: "name", lable: "名称"},
        {prop: "classNum", lable: "总课次"},
        {prop: "classTime", lable: "总课时"},
        {prop: "goods", lable: "包含商品"},
        {prop: "goodsCost", lable: "商品费用"},
        {prop: "enrollPrice", lable: "报名价格"},
      ],
      setMealList: [
        {name: "纹绣课程1", classNum: 1, classTime: 1, goods: "纹绣套装工具", goodsCost: "3000.00", enrollPrice: "4800.00"},
        {name: "纹绣课程2", classNum: 1, classTime: 1, goods: "纹绣套装工具", goodsCost: "3000.00", enrollPrice: "4800.00"},
        {name: "纹绣课程3", classNum: 1, classTime: 1, goods: "纹绣套装工具", goodsCost: "3000.00", enrollPrice: "4800.00"},
        {name: "纹绣课程4", classNum: 1, classTime: 1, goods: "纹绣套装工具", goodsCost: "3000.00", enrollPrice: "4800.00"},
        {name: "纹绣课程5", classNum: 1, classTime: 1, goods: "纹绣套装工具", goodsCost: "3000.00", enrollPrice: "4800.00"},
      ]
    }
  },
  startTime: "2021-04-24",
  endTime: "2021-05-03",
  belong: "凤岗"
})
const onlineState = reactive({
  briefIntroduction: "2021年五一特惠：（美容、化妆、美甲、纹绣、美睫）五科任选2科，美睫、纹绣不含工具。",
  suitableSubjects: "所有",
  trainingObjectives: "所有",
  imagesUrl: ""
})

function inpChange(e) {
  const reader = new FileReader()
  reader.onload = function (o) {
    onlineState.imagesUrl = o.target.result
  }
  reader.readAsDataURL(e.target.files[0])
}

function uploadImg() {
  const uploadInp = document.getElementById('uploadImg')
  uploadInp.click()
}
</script>

<style lang="scss" scoped>
.detail-content {
  padding: 0 20px;
  .com-tag {
    padding-top :10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 17px;
    color: #303133;
    &>div {
      width: 50%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
    }
    .tag_a {
      color: #409EFF;
      border-bottom: 3px solid #409EFF;
    }
    .tag_b {
      border-bottom: 3px solid #e4e7ed;
    }
  }

  .basic-info {
    font-size: 14px;
    color: #666666;
    padding-top: 25px;
    .info-item {
      display: flex;
      margin-bottom: 16px;
      .title {
        width: 140px;
        text-align: end;
        padding-right: 15px;
        color: #606266;
        height: 25px;
        line-height: 25px;
      }
      .table-content {
        width: 720px;
      }
      .content {
        &>span {
          line-height: 25px;
        }
        .set-meal-type {
          border-top: 1px solid #ebeef5;
          font-size: 13px;
          color: #303133;
          height: 48px;
          display: flex;
          align-items: center;
          &>div:nth-child(1) {
            width: 500px;
          }
          &>div:nth-child(2) {
            width: 120px;
          }
          &>div:nth-child(3) {
            width: 100px;
            padding-right: 10px;
            text-align: end;
            i {
              cursor: pointer;
            }
            .icon {
              transform: rotateZ(90deg);
              display: inline-block;
            }
          }
        }
        .table-list {
          border-top: 1px solid #ebeef5;
          border-left: 1px solid #ebeef5;
          margin-bottom: 30px;
          .list {
            display: flex;
            .list-item {
              width: 120px;
              padding: 12px 10px;
              line-height: 23px;
              text-align: center;
              border-right: 1px solid #ebeef5;
              border-bottom: 1px solid #ebeef5;
             }
          }
          .list_b {
            &:hover {
              background-color: #f5f7fa;
            }
          }
        }
        .table-footer {
          height: 70px;
          border-top: 1px solid #ebeef5;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px dashed #000;
        }
      }
    }
  }

  .noline-info {
    .img-info {
      height: 200px;
      .upBtn {
        padding-top: 20px;
        padding-left: 140px;
        .img-list {
          padding-top: 30px;
          img {
             width: 120px;
             height: auto;
          }
        }
      }
    }
  }
  .save-btn {
    margin: 30px
  }
}
</style>